$(function () {
    // echart_1();
    echart_2();
    // echart_3();
    echart_map();

    //echart_1湖南货物收入
    function echart_1() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_1'));
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}件"
            },
            legend: {
                x: 'center',
                y: '15%',
                data: ['身体清洁类', '洗发水类', '生活小商品类', '化妆品类'],
                icon: 'circle',
                textStyle: {
                    color: '#fff',
                }
            },
            calculable: true,
            series: [{
                name: '',
                type: 'pie',
                //起始角度，支持范围[0, 360]
                // startAngle: 0,
                //饼图的半径，数组的第一项是内半径，第二项是外半径
                radius: '45%',
                //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
                center: ['60%', '65%'],
                //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
                // 'radius' 面积展现数据的百分比，半径展现数据的大小。
                //  'area' 所有扇区面积相同，仅通过半径展现数据大小
                // roseType: 'radius',
                //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
                // avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}{c}万元'
                    },
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length2: 1,
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: [{
                    value: 9097.63,
                    name: '身体清洁类',
                    itemStyle: {
                        normal: {
                            color: '#f1f82f'
                        }
                    }
                },
                    {
                        value: 4740.16,
                        name: '洗发水类',
                        itemStyle: {
                            normal: {
                                color: '#2bf371'
                            }
                        }
                    },
                    {
                        value: 2931.79,
                        name: '化妆品类',
                        itemStyle: {
                            normal: {
                                color: '#f64f47'
                            }
                        }
                    },
                    {
                        value: 3174.27,
                        name: '生活小商品类',
                        itemStyle: {
                            normal: {
                                color: '#f590e5'
                            }
                        }
                    }
                ]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    //电子商务销售额、订单数
    function echart_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_2'));
        myChart.clear();
        option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['酒店盒子', '线上商城'],
                textStyle: {
                    color: '#fff'
                },
                top: '8%'
            },
            grid: {
                top: '40%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            color: ['#FFEA51', '#4BF0FF', '#FF4949', '#FFA74D', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'],
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2021年7月', '2021年8月', '2021年9月', '2021年10月', '2021年11月'],
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                }
            },
            yAxis: {
                name: '',
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                }
            },
            series: [
                {
                    name: '酒店盒子',
                    type: 'line',
                    data: [3961.88, 4233.63, 4333.14, 4653.01, 5031.47]
                },
                {
                    name: '线上商城',
                    type: 'line',
                    data: [3374.76, 3364.76, 3274.76, 3371.82, 3259.87]
                }
            ]
        };
        myChart.setOption(option);
    }

    // echart_map中国地图
    function echart_map() {
        var myChart = echarts.init(document.getElementById('chart_map'));

        function showProvince() {
            var geoCoordMap = {
                '季号酒店': [121.589243, 29.881428],
                '喜居酒店': [121.569957,29.836865],
            };
            var data = [{
                name: '总部',
                value: [50, 'xxxxxxxxxxx']
            },{
                name: '季号酒店',
                value: [100, '浙江省宁波市鄞州区朝晖路136号']
            },{
                name: '喜居酒店',
                value: [100, '浙江省宁波市鄞州区馨园路115号']
            }
            ];
            var max = 480,
                min = 9;
            var maxSize4Pin = 50,
                minSize4Pin = 20;
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];

                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                        });
                    }
                }
                return res;
            };

            myChart.setOption(option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function loadData(result) {
                        return result.name + '<br />' + result.value[3];
                    }
                },
                geo: {
                    zoom: 1.2,
                    show: true,
                    map: '宁波',
                    mapType: '宁波',
                    label: {
                        normal: {
                            show: true,
                            textStyle: {color: "#4bf316"}
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(147, 235, 248, 1)',
                            borderWidth: 2,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(   47,79,79, .2)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            shadowColor: 'rgba(128, 217, 248, 1)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10
                        },
                        emphasis: {
                            areaColor: '#389BB7',
                            borderWidth: 0
                        }
                    }
                },
                series: [
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(data.sort(function (a, b) {
                            return b.value - a.value;
                        }).slice(0, 97)),
                        symbolSize: function (val) {
                            return val[2] / 5;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                show: true,
                                textStyle: {
                                    marginTop: '55px',
                                    color: '#fff',
                                    fontSize: 14,
                                }
                            }
                        },
                        hoverAnimation: true,
                        itemStyle: {
                            normal: {
                                color: '#05C3F9',
                                shadowBlur: 15,
                                shadowColor: '#05C3F9'
                            }
                        },
                        zlevel: 1
                    },

                ]
            });
        }

        showProvince();
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    //echart_3货物周转量
    function echart_3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_3'));
        myChart.clear();
        option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['身体清洁类', '洗发水类', '生活小商品类', '化妆品类'],
                textStyle: {
                    color: '#fff'
                },
                top: '8%'
            },
            grid: {
                top: '40%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            color: ['#FFEA51', '#4BF0FF', '#44AFF0', '#4E82FF'],
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['8月27日', '8月28日', '8月29日', '8月30日'],
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                }
            },
            yAxis: {
                name: '元',
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                }
            },
            series: [
                {
                    name: '身体清洁类',
                    type: 'line',
                    data: [3961, 4233, 4183, 3633, 3704]
                },
                {
                    name: '洗发水类',
                    type: 'line',
                    data: [3374, 3364, 3274, 3371, 3259]
                },
                {
                    name: '生活小商品类',
                    type: 'line',
                    data: [312, 286, 339, 431, 509]
                },
                {
                    name: '化妆品类',
                    type: 'line',
                    data: [686, 847, 895, 865, 886]
                }
            ]
        };
        myChart.setOption(option);
    }
});
